<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>我的私教</title>
</head>
<body>
<div id="app">
    <!--页面主体-->
    <el-container>
        <el-main>
            <!--展示我的私教-->
            <el-table :data="coach" border>
                <el-table-column prop="realname" label="名称">
                </el-table-column>
                <el-table-column prop="style" label="流派">
                </el-table-column>
                <el-table-column prop="venueName" label="所属场馆">
                </el-table-column>
                <el-table-column prop="price" label="课时费">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="book(scope.row)" type="text" size="small">预约</el-button>
                        <el-button @click="broke(scope.row)" type="text" size="small">解约</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageInfo.currentPage"
                        :page-sizes="[2, 3]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageInfo.total">
                </el-pagination>
            </div>
            <!--预约界面-->
            <el-drawer title="预约教练" :visible.sync="drawer" :direction="drawerPos">
                <template slot-scope="scope">
                    <el-row>
                        <el-col :offset="6">
                            <div style="margin: 20px;"></div>
                            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                                <el-form-item label="选择日期">
                                    <el-date-picker v-model="bookTime.date" type="date" placeholder="选择日期"></el-date-picker>
                                </el-form-item>
                                <el-form-item label="选择时间">
                                    <el-select v-model="bookTime.time" placeholder="选择时间">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="选择课程">
                                    <el-select v-model="bookTime.lessonId" placeholder="选择课程">
                                        <el-option v-for="item in lessons" :key="item.lessonId" :label="item.name" :value="item.lessonId"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" size="small" @click="postSign()">确定预约</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </template>
            </el-drawer>
        </el-main>
    </el-container>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                pageInfo:{
                    currentPage: 1,// 当前页
                    size: 3,// 每页多少条
                    total: 1// 总条目数
                },
                coach: [],// 所有教练信息
                drawer: false,// 抽屉状态
                oneCoach: {},//一条教练的信息
                drawerPos: "rtl",// 抽屉从右向左打开
                labelPosition: "top",
                bookTime: {
                    coachId:"",
                    date: "",
                    time: "",
                    lessonId: ""
                },
                options: [
                    {value: '08:00:00', label: '08:00-09:00'},
                    {value: '09:00:00', label: '09:00-10:00'},
                    {value: '10:00:00', label: '10:00-11:00'},
                    {value: '11:00:00', label: '11:00-12:00'},
                    {value: '14:00:00', label: '14:00-15:00'},
                    {value: '15:00:00', label: '15:00-16:00'},
                    {value: '16:00:00', label: '16:00-17:00'},
                    {value: '17:00:00', label: '17:00-18:00'}
                ],
                lessons: [],
            }
        },
        methods: {
            // 分页 - 更改每页条数
            handleSizeChange(val) {
                this.pageInfo.size = val
                this.getAll();
            },
            // 分页 - 更改当前页
            handleCurrentChange(val) {
                this.pageInfo.currentPage = val
                this.getAll();
            },
            // 获取我的所有签约教练
            getAll() {
                axios.get("/sign/getMyCoach?page=" + this.pageInfo.currentPage + "&size=" + this.pageInfo.size).then(resp => {
                    if (resp.status === resp.data.code) {
                        console.log(resp.data.data)
                        this.coach = resp.data.data.records
                        this.pageInfo.total = resp.data.data.total
                    }
                })
            },
            // 点击预约按钮
            book(row){
                console.log(row);
                this.drawer = true;
                this.oneCoach = row;
                this.bookTime.coachId = row.coachId;
                axios.get("/lesson/my?coachId="+this.bookTime.coachId).then(resp=>{
                    if(resp.status===resp.data.code){
                        this.lessons = resp.data.data
                        console.log(this.lessons)
                    }
                })
            },
            // 点击确定预约按钮
            postSign(){
                axios.get("/coach/checkTime", {params:this.bookTime}).then(resp=>{
                    if (resp.status === resp.data.code){
                        this.$message({
                            type: 'success',
                            message: '预约成功'
                        });
                        setTimeout(() => {
                            this.drawer = false;
                        }, 1000)
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '当前时间已被占用 请重新选择'
                        });
                    }
                })
            },
            // 点击解约按钮
            broke(row){
                coachId = row.coachId
                this.$confirm('确定解约吗?', '提示', {confirmButtonText: '确定', cancelButtonText: '取消',type: 'info'}).then(() => {
                    axios.post("/sign/broke?coachId="+coachId).then(resp => {
                        if (resp.data.code === resp.status) {
                            this.$message({type: 'success',message: '解约成功!'});
                            this.getAll()
                        }
                    })
                });
            }
        },
        created() {
            this.getAll();
        }
    })
</script>
</body>
</html>